<template>
  <div>
    <div class="header">
      <div style="display: flex">
        <van-icon
          @click="handleBack"
          size="23"
          class="left-icon"
          name="arrow-left"
        />
        <div class="left-icon">设置新密码</div>
      </div>
    </div>
    <div style="con">
      <van-cell-group inset>
        <van-field
          required
          v-model="ChangePwForm.newpw"
          label="新密码"
          placeholder="请输入6~20个字符的密码"
          style="margin: 20px 0px 0px 0px"
          type="password"
        />
        <van-field
          required
          v-model="ChangePwForm.againpw"
          label="确认密码"
          placeholder="请再次输入密码"
          style="margin: 20px 0px 0px 0px"
          type="password"
        />
        <van-button
          type="info"
          style="margin: 20px 0px 0px 0px"
          block
          round
          @click="submitChangePw"
          >确认</van-button
        >
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { checkChangePw } from "@/utils/check";
import { ChangeUser } from "@/api/user";
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      ChangePwForm: {
        newpw: "",
        againpw: "",
      },
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },

    submitChangePw() {
      this.$dialog
        .confirm({
          message: "确认修改？",
          confirmButtonColor: "red",
        })
        .then(() => {
          if (checkChangePw(this.ChangePwForm)) {
            this.user.password = this.ChangePwForm.newpw;
            ChangeUser(this.user).then((res) => {
              if (res.status) {
                Dialog.alert({
                  message: "修改成功",
                }).then(() => {
                  //on close
                });
                this.$router.push("/login");
              }
            });
          }
        });
    },
  },
};
</script>
<style scoped>
.con {
  width: 80px;
  background: #ffffff;
}
.header {
  width: 100%;
  height: 70px;
  background: #ffffff;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
}
.left-icon {
  padding-top: 23px;
  padding-left: 15px;
  margin-right: 20px;
}
</style>